/**
 * @description 所有全局配置的状态管理，如无必要请勿修改
 */
import {isJson} from '@/utils/validate'
import {
    columnStyle,
    fixedHeader,
    i18n,
    layout,
    logo,
    showFullScreen,
    showLanguage,
    showNotice,
    showProgressBar,
    showRefresh,
    showSearch,
    showTabs,
    showTabsBarIcon,
    showTheme,
    showThemeSetting,
    tabsBarStyle,
    themeName,
    title,
} from '@/config'

const defaultTheme = {
    layout,
    themeName,
    columnStyle,
    fixedHeader,
    showProgressBar,
    showTabs,
    tabsBarStyle,
    showTabsBarIcon,
    showLanguage,
    showRefresh,
    showSearch,
    showTheme,
    showNotice,
    showFullScreen,
    showThemeSetting,
}
const getLocalStorage = (key) => {
    const value = localStorage.getItem(key)
    if (isJson(value)) {
        return JSON.parse(value)
    } else {
        return false
    }
}
const {collapse} = getLocalStorage('collapse')
const {language} = getLocalStorage('language')
const state = () => ({
    logo,
    title,
    device: 'desktop',
    collapse: collapse || false,
    language: language || navigator.language || i18n,
    theme: getLocalStorage('theme') || {...defaultTheme},
    extra: {first: '', transferRouteName: ''},

    defTheme: localStorage.getItem('defTheme') || 'night',
})
const getters = {
    logo: (settingState) => settingState.logo,
    title: (settingState) => settingState.title,
    device: (settingState) => settingState.device,
    collapse: (settingState) => settingState.collapse,
    language: (settingState) => settingState.language,
    theme: (settingState) => settingState.theme,
    extra: (settingState) => settingState.extra,
    defTheme: (settingState) => settingState.defTheme,
}
const mutations = {
    openSideBar(settingState) {
        settingState.collapse = false
    },
    foldSideBar(settingState) {
        settingState.collapse = true
    },
    toggleDevice(settingState, device) {
        settingState.device = device
    },
    toggleCollapse(settingState) {
        settingState.collapse = !settingState.collapse
        localStorage.setItem('collapse', `{"collapse":${settingState.collapse}}`)
    },
    changeLanguage(settingState, currentLanguage) {
        settingState.language = currentLanguage
        localStorage.setItem('language', `{"language":"${currentLanguage}"}`)
    },
    saveTheme(settingState) {
        localStorage.setItem('theme', JSON.stringify(settingState.theme))
    },
    resetTheme(settingState) {
        settingState.theme = {...defaultTheme}
        localStorage.removeItem('theme')
        document.getElementsByTagName(
            'body'
        )[0].className = `vab-theme-${settingState.theme.themeName}`
    },
    defTheme(settingState, val) {
        settingState.defTheme = val;
        localStorage.setItem('defTheme', val)
    },
}
const actions = {
    openSideBar({commit}) {
        commit('openSideBar')
    },
    foldSideBar({commit}) {
        commit('foldSideBar')
    },
    toggleDevice({commit}, device) {
        commit('toggleDevice', device)
    },
    toggleCollapse({commit}) {
        commit('toggleCollapse')
    },
    changeLanguage: ({commit}, currentLanguage) => {
        commit('changeLanguage', currentLanguage)
    },
    saveTheme({commit}) {
        commit('saveTheme')
    },
    resetTheme({commit}) {
        commit('resetTheme')
    },
    defTheme({commit}, val) {
        commit('defTheme', val)
    },
}
export default {state, getters, mutations, actions}
